<template>
  <section>
    <!--门票列表-->
    <el-table :data="ticketData" style="width: 100%">
      <el-table-column prop="daytime" label="日期">
      </el-table-column>
      <el-table-column prop="num" label="数量">
        <template slot-scope="scope">
          <dayNumInput :val="scope.row.num" :daytime="scope.row.daytime"></dayNumInput>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>
  </section>
</template>
<script type="text/ecmascript-6">
  import util from '../../util'
  import dayNumInput from '../common/dayNumInput'
  import { apiTree } from '../../apiTree'

  export default {
    name: 'daynum',
    // 局部注册组件
    components: {
      dayNumInput
    },
    data() {
      return {
        ticketData: [], // 门票列表
        total: 0,
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1
        }
      }
    },
    methods: {
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      // 获得门票列表
      ticketLimit() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1
          }
        }
        apiTree('ticket/limit', 'ticket/limit', para).then((res) => {
          this.ticketData = res.d.data
          this.total = res.d.total_num
        })
      }
    },
    created() {
      this.ticketLimit()
    },
    watch: {
      $route: 'ticketLimit'
    }
  }

</script>

<style type="text/css" media="screen">
  .top-title {
    display: block;
    width: 100%;
    height: 40px;
    text-indent: 10px;
    line-height: 40px;
    font-size: 20px;
    color: #F78A73;
  }
</style>
